<!DOCTYPE html>
<html>

<head>
  <title>双飞翼布局</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width initial-scale=1.0">
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .content {
      overflow: hidden;
    }

    .box {
      padding-bottom: 1000px;
      /*伪等高布局的设置*/
      margin-bottom: -1000px;
      /*伪等高布局的设置*/
    }

    .box1 {
      float: left;
      width: 100%;
      background-color: greenyellow;
    }

    .box1 .middle {
      padding: 0 300px 0 200px;
    }

    .box2 {
      margin-left: -100%;
      float: left;
      width: 200px;
      background-color: indianred;
    }

    .box3 {
      margin-left: -300px;
      float: left;
      width: 300px;
      background-color: deepskyblue;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="box1 box">
      <div class="middle">
        <h3>这是双飞翼布局的使用方法</h3>
        <p>布局思路：中间栏作为主栏，要放在content整个盒子的最上面。
          利用浮动使3个div紧挨着排列。然后利用margin外边距调整左右两栏位于窗口两侧。
        </p>
        <p>圣杯布局的做法：然而要达使中间栏的区域全部只位于中间位置，则需设置整个大盒子拥有左右2栏宽度相同的左右边距，
          使这个content盒子正好空出左右2栏的宽度，继而利用relative相对定位，使左右2栏复位。
        </p>
        <p>双飞翼布局的做法：在中间栏中div加入一个子元素，再使用padding使内容显示在中间栏。这样做不影响使用
          margin负值完成的整体布局。如果直接设置中间栏div的padding,则会打乱margin负值的布局。
        </p>
        <p>关于直接设置中间栏div的padding问题：padding会增加整个中间栏div的盒子宽度，是盒子宽度超过100%，
          margin-left:-100%,只会使box2边距到达box1整个盒子的内边距距离之外，无法实现贴在左边，故不可行之。
        </p>
      </div>
    </div>
    <div class="box2 box">
      <p>左边栏的地方，伪等高布局排列</p>
    </div>
    <div class="box3 box">
      <p>右边栏的地方，伪等高布局排列</p>
    </div>
  </div>
</body>

</html>